@charset "utf-8";
@import "common/reset";
@function r($px) {
    @return $px/100+rem;
}

html,
body {
    height: 100%;
}


.mobile {
    width: 100%;
    header {
        width: 100%;
        height: r(89);
        background-color: #b20000;
        overflow: hidden;
        //      position: absolute;
        .login {
            margin-top: r(32);
            margin-left: r(23);
            float: left;
            li {
                height: r(4);
                width: r(30);
                line-height: r(4);
                background-color: #fff;
                margin-top: r(5);
                color: white;
                font-size: r(12);
                position: relative;
                &::before {
                    position: absolute;
                    top: 0;
                    left: r(-5);
                    content: "";
                    width: r(4);
                    height: r(4);
                    background-color: white;
                    display: inline-block;
                }
            }
        }
        .logo {
            float: left;
            font-size: 0;
            width: r(264);
            height: r(39);
            overflow: hidden;
            margin-left: r(134);
            margin-top: r(25);
            img {
                width: 100%;
            }
        }
        .search {
            float: right;
            width: r(43);
            height: r(43);
            margin-right: r(17);
            margin-top: r(25);
            font-size: 0;
            img {
                width: 100%;
            }
        }
    }
    section{
        width: 100%;
        top: r(89);
        margin-bottom: r(100);
        >p{
            width: r(580);
            height: r(77);
            border-top: 1px solid #e6e6e6;
            font-size: r(22);
            color: #C5C5C5;
            text-align: center;
            margin: 0 auto;
            margin-top: r(30);
            padding-top: r(20);
        }
        
        //内容
        .content{
            width: r(580);
            height: 100%;
            margin: 0 auto;
            margin-top: r(30);
            font-size: r(30);
            h2{
                font-size: r(30);
                color: #5c5856;
            }
            .time{
                height: r(35);
                width: 100%;
                border-bottom: r(1) solid #C5C5C5;
                font-size: r(18);
                color: #8b8b8b;
                margin-top: r(20);
                margin-bottom: r(15);
                a{
                    color: #8b8b8b;
                    float: left;
                }
                span{
                    float: right;
                }
            }
            .picbox{
                width: 100%;
                height: r(280);
                overflow: hidden;
                margin-bottom: r(30);
                img{
                    width: 100%;
                }
            }
            p{
                font-size: r(20);
                letter-spacing: r(0.2);
                color: #8B8B8B;
                line-height: r(30);
            }
        }
        .shijian{
            width: 100%;
            height: r(200);
            border-bottom: r(27) solid #C5C5C5;
            border-top: r(27) solid #C5C5C5;
            margin-top: r(30);
            p{
                margin-left: 5%;
                margin-top: r(10);
                margin-bottom: r(10);
                font-size: r(30);
                color: #5C5856;
            }
            .box{
                height: r(38);
                overflow: hidden;
                font-size: r(20);
                color: #727171;
                margin-left: 5%;
                img{
                    width: r(26);
                    height: r(26);
                }
            }
        }
        .renwu{
            width: 100%;
            height: r(180);
            border-bottom: r(27) solid #c5c5c5;
            >p{
                font-size: r(20);
                color: #5C5856;
                margin-left: 5%;
            }
            .renwubox{
                color: #5C5856;
                width: r(580);
                margin: 0 auto;
                .yige{
                    margin-top: r(10);
                    width: 33%;
                    height: r(90);
                    font-size: 0;
                    &:nth-of-type(1){
                        float: left;
                    }
                    &:nth-of-type(2){
                        float: right;
                    }
                    &:nth-of-type(3){
                        float: left;
                    }
                    .touxiang{
                        width: r(90);
                        height: r(90);
                        overflow: hidden;
                        float: left;
                        margin-right: r(5);
                        img{
                            height: 100%;
                        }
                    }
                    p{
                        &:nth-of-type(1){
                            font-size: r(18);
                        }
                        &:nth-of-type(2){
                            font-size: r(14);
                        }
                    }
                }
            }
        }
        >button{
            width: r(580);
            height: r(86);
            background-color: #B20000;
            color: white;
            font-size: r(34);
            margin: 0 auto;
            display: block;
            margin-top: r(30);
            span{
                height: r(30);
                width: r(30);
                border-radius: 50%;
                display: inline-block;
                color: #B20000;
                background-color: white;
                text-align: center;
            }   
        }
    }
}

#check,
#check1,#check4,#check5 {
    display: none;
    transform: translateY(-100px);
}

.loginbox {
    width: 100%;
    height: 100%;
    background-color: #222222;
    position: fixed;
    z-index: 10;
    top: 0;
    transform: translateX(-100%);
    transition: 0.8s;
    .search1 {
        width: r(580);
        height: r(100);
        margin-left: r(30);
        position: relative;
        background-color: #211d1c;
        border-bottom: r(2) solid #524e4d;
        .back {
            position: absolute;
            top: r(20);
            display: inline-block;
            width: r(43);
            height: r(43);
            background-color: #b60005;
            color: #FFFFFF;
            font-size: r(40);
            text-align: center;
            border-radius: 50%;
            margin-top: r(10);
            line-height: r(40);
        }
        .search {
            width: r(440);
            height: r(60);
            border-radius: r(30);
            border: r(3) solid white;
            position: absolute;
            top: r(20);
            left: r(140);
            background-color: #1f1f1f;
            input {
                position: absolute;
                &:nth-of-type(1) {
                    top: r(8);
                    left: r(14);
                    width: r(40);
                }
                &:nth-of-type(2) {
                    top: r(12);
                    left: r(80);
                    background-color: #1f1f1f;
                    border: none;
                    font-size: r(26);
                    color: white;
                }
            }
        }
    }
    .geren {
        width: 100%;
        height: r(400);
        text-align: center;
        font-size: r(30);
        overflow: hidden;
        border-bottom: r(30) solid #303030;
        .touxiang {
            height: r(150);
            width: r(150);
            margin: 0 auto;
            margin-top: r(80);
            margin-bottom: r(20);
            img {
                width: 100%;
            }
        }
        label{
            color: white;
        }
        a {
            color: white;
            margin-bottom: r(10);
            display: block;
            &:nth-of-type(1) {
                font-size: r(26);
                color: gray;
            }
        }
    }
    >input {
        display: none;
    }
    #check2:checked~label {
        .tiao {
            span {
                &:nth-of-type(2) {
                    display: none;
                }
                &:nth-of-type(3) {
                    display: block;
                }
            }
        }
    }
    #check2:checked~.tiaobox {
        height: r(200);
        transition: 0.8s;
    }
    .tiao {
        width: r(540);
        height: r(68);
        border-bottom: r(2) solid #524e4d;
        margin-left: r(50);
        line-height: r(38);
        span {
            color: gray;
            &:nth-of-type(1) {
                font-size: r(30);
            }
            &:nth-of-type(2) {
                font-size: r(40);
                float: right;
                margin-top: r(20);
            }
            &:nth-of-type(3) {
                font-size: r(40);
                display: none;
                float: right;
                margin-top: r(20);
            }
        }
    }
    .tiaobox {
        height: 0;
        overflow: hidden;
        transition: 0.8s;
        p {
            width: r(400);
            margin-left: r(120);
            height: r(66);
            font-size: r(28);
            color: white;
            margin-top: r(30);
            text-align: center;
            &:nth-of-type(1) {
                border-bottom: r(2) solid #524e4d;
            }
        }
    }
}

.person{
    width: 100%;
    height: 100%;
    background-color: #222222;
    position: fixed;
    z-index: 10;
    top: 0;
    transform: translateX(-100%);
    transition: 0.8s;
    .search1 {
        width: r(580);
        height: r(100);
        margin-left: r(30);
        position: relative;
        background-color: #211d1c;
        border-bottom: r(2) solid #524e4d;
        .back {
            position: absolute;
            top: r(20);
            display: inline-block;
            width: r(43);
            height: r(43);
            background-color: #b60005;
            color: #FFFFFF;
            font-size: r(40);
            text-align: center;
            border-radius: 50%;
            margin-top: r(10);
            line-height: r(40);
        }
        .search {
            width: r(440);
            height: r(60);
            border-radius: r(30);
            border: r(3) solid white;
            position: absolute;
            top: r(20);
            left: r(140);
            background-color: #1f1f1f;
            input {
                position: absolute;
                &:nth-of-type(1) {
                    top: r(8);
                    left: r(14);
                    width: r(40);
                }
                &:nth-of-type(2) {
                    top: r(12);
                    left: r(80);
                    background-color: #1f1f1f;
                    border: none;
                    font-size: r(26);
                    color: white;
                }
            }
        }
    }
    .geren {
        width: 100%;
        height: r(400);
        text-align: center;
        font-size: r(30);
        overflow: hidden;
        border-bottom: r(30) solid #303030;
        .port{
            width: r(120);
            height: r(120);
            margin: r(30) auto;
            margin-bottom: r(20);
            border-radius: 50%;
            background-color: white;
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        ul{
            width: 90%;
            display: inline-block;
            li{
                &:nth-of-type(1){
                    span{
                        font-size: r(30);
                        font-weight: 100;
                        color: white;
                        vertical-align: middle;
                        margin: 0 r(10);
                    }
                    button{
                        width: r(180);
                        height: r(40);
                        border: r(1) solid white;
                        line-height: r(20);
                        background: none;
                        font-size: r(24);
                        color: white;
                    }
                }
                &:nth-of-type(2){
                    width: 50%;
                    margin: 0 auto;
                    .star{
                        width: r(36);
                        height: r(32);
                        background-size: 100%;
                        float: left;
                        img{
                            width: 100%;
                        }
                    }
                }
                &:nth-of-type(3){
                    font-size: r(24);
                    color: #d4d4d4;
                    margin-top: r(10);
                    a{
                        color: #af0206;
                    }
                }
                &:nth-of-type(4){
                    button{
                        width: r(220);
                        height: r(52);
                        border: none;
                        border-radius: r(26);
                        color: white;
                        font-size: r(24);
                        line-height: r(24);
                        margin-top: r(20);
                        margin-bottom: r(20);
                        background-color: #b60005;
                    }
                }
            }
        }
    }
    .exit{
        margin: r(42) auto;
        margin-bottom: 0;
        text-align: center;
        button{
            width: r(180);
            height: r(50);
            border-radius: r(24);
            font-size: r(24);
            letter-spacing: r(5);
            color: white;
            background-color: #B60005;
        }
    }
    >input {
        display: none;
    }
    #check6:checked~label {
        .tiao {
            span {
                &:nth-of-type(2) {
                    display: none;
                }
                &:nth-of-type(3) {
                    display: block;
                }
            }
        }
    }
    #check6:checked~.tiaobox {
        height: r(200);
        transition: 0.8s;
    }
    .tiao {
        width: r(540);
        height: r(68);
        border-bottom: r(2) solid #524e4d;
        margin-left: r(50);
        line-height: r(38);
        span {
            color: gray;
            &:nth-of-type(1) {
                font-size: r(30);
            }
            &:nth-of-type(2) {
                font-size: r(40);
                float: right;
                margin-top: r(20);
            }
            &:nth-of-type(3) {
                font-size: r(40);
                display: none;
                float: right;
                margin-top: r(20);
            }
        }
    }
    .tiaobox {
        height: 0;
        overflow: hidden;
        transition: 0.8s;
        p {
            width: r(400);
            margin-left: r(120);
            height: r(66);
            font-size: r(28);
            color: white;
            margin-top: r(30);
            text-align: center;
            &:nth-of-type(1) {
                border-bottom: r(2) solid #524e4d;
            }
        }
    }
}
#check:checked~.loginbox {
    transform: translateX(0);
}

.searchbox {
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    position: fixed;
    z-index: 10;
    top: 0;
    transform: translateY(-100%);
    transition: 0.8s;
    .search1 {
        width: 100%;
        height: r(100);
        position: relative;
        background-color: #211d1c;
        border-bottom: r(2) solid #524e4d;
        .back {
            position: absolute;
            top: r(20);
            display: inline-block;
            width: r(43);
            height: r(43);
            background-color: #b60005;
            color: #FFFFFF;
            font-size: r(40);
            text-align: center;
            border-radius: 50%;
            margin-top: r(10);
            line-height: r(40);
            margin-left: r(20);
        }
        .search {
            width: r(520);
            height: r(60);
            border-radius: r(30);
            border: r(3) solid white;
            position: absolute;
            top: r(20);
            left: r(100);
            background-color: #1f1f1f;
            input {
                position: absolute;
                &:nth-of-type(1) {
                    top: r(8);
                    left: r(14);
                    width: r(40);
                }
                &:nth-of-type(2) {
                    top: r(12);
                    left: r(80);
                    background-color: #1f1f1f;
                    border: none;
                    font-size: r(26);
                    color: white;
                }
            }
        }
    }
    .search2{
        width: 100%;
        position: relative;
        padding-left: r(40);
        h1{
            font-size: r(13);
            color: #211d1d;
            margin-bottom: r(16);
            margin-top: r(40);
        }
        .keyword{
            margin-right: r(8);
            margin-bottom: r(10);
            border: r(1) solid #e4e4e4;
            display: block;
            float: left;
            font-size: r(25);
            padding: r(12) r(18);
            color: #8b8b8b;
            &:hover{
                background-color: #ff0000;
                color: white;
            }
        }
    }
}

#check1:checked~.searchbox {
    transform: translateY(0);
}

#check4:checked~.loginjm{
    transform: translateY(0);
}
#check5:checked~.person{
    transform: translateY(0);
}
.loginjm{
    width: 100%;
    height: 100%;
    background-color: #222222;
    position: fixed;
    z-index: 10;
    top: 0;
    transform: translateY(-100%);
    transition: 0.8s;
    .logo{
        width: r(240);
        height: r(200);
        background: url(../img/common_logo.png)no-repeat center center;
        background-size: 90%;
        margin: r(60) auto;
        margin-bottom: r(30);
    }
    .tel,.password{
        width: 80%;
        margin: 0 auto;
        margin-bottom: r(32);
        font-size: 0;
        .bg{
            float: left;
            width: 20%;
            height: r(78);
            background-color: #303030;
            .rentou{
                margin: 0 auto;
                width: r(90);
                height: r(78);
                background: url(../img/login_01.png)no-repeat center center;
                background-size: 50%;
                background-color: #303030;
            }
            .mima{
                margin: 0 auto;
                width: r(90);
                height: r(78);
                background: url(../img/login_02.png)no-repeat center center;
                background-size: 50%;
                background-color: #303030;
            }
        }
        .shuru{
            width: 80%;
            float: left;
            height: r(78);
            background-color: #3d3d3d;
            text-align: center;
            overflow: hidden;
            input{
                width: 80%;
                height: 100%;
                border: none;
                font-size: r(30);
                color: #cdcdcd;
                background: none;
            }
        }
    }
    .forget{
        width: 80%;
        height: r(40);
        margin: 0 auto;
        margin-top: r(20);
        position: relative;
        a{
            position: absolute;
            right: 0;
            display: block;
            width: r(160);
            cursor: pointer;
            img{
                float: left;
            }
            span{
                float: left;
                font-size: r(30);
                color: white;
            }
        }
    }
    button{
        width: r(480);
        height: r(76);
        background: #303030;
        margin: 0 auto;
        margin-top: r(20);
        display: block;
        color: white;
        font-size: r(30);
    }
    label{
        width: r(480);
        height: r(76);
        background: #303030;
        margin: 0 auto;
        margin-top: r(20);
        display: block;
        color: white;
        font-size: r(30);
        text-align: center;
        padding-top: r(20);
    }
}
